<template>
  <div>
    <el-input v-model="word" :clearable="true" style="width: 200px" placeholder="工作名称" @change="changeKeyword" />
    <el-select
      v-model="type"
      style="width: 120px"
      placeholder="选择类型"
      :clearable="true"
      @change="changeTyp"
    >
      <el-option
        v-for="item in typList"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="mod"
      style="width: 120px"
      placeholder="选择模式"
      :clearable="true"
      @change="changeMode"
    >
      <el-option
        v-for="item in modeList"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'WorkFilter',
  props: {
    keyword: {
      type: String,
      default: null
    },
    typ: {
      type: String,
      default: null
    },
    mode: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      typList: [
        { name: '练级', value: '练级' },
        { name: '采集', value: '采集' },
        { name: '仓库', value: '仓库' }
      ],
      modeList: [
        { name: '组队', value: '组队' },
        { name: '单人', value: '单人' }
      ],
      word: this.keyword,
      type: this.typ,
      mod: this.mode
    }
  },
  watch: {
    typ: function() {
      this.type = this.typ
    },
    mode: function() {
      this.mod = this.mode
    },
    keyword: function() {
      this.word = this.keyword
    }
  },
  methods: {
    changeKeyword() {
      this.$emit('update:keyword', this.word)
      this.$emit('success')
    },
    changeTyp() {
      this.$emit('update:typ', this.type)
      this.$emit('success')
    },
    changeMode() {
      this.$emit('update:mode', this.mod)
      this.$emit('success')
    }
  }
}
</script>
